import React, { useEffect, useState } from 'react';
import { Button, message } from 'antd';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons';
import { useStore } from '@/store';
import { setStore } from '@/services/system.service';
import { history } from 'umi';

import Editor from 'react-simple-code-editor';
import { highlight, languages } from 'prismjs';
import 'prismjs/components/prism-clike.min';
import 'prismjs/components/prism-javascript.min';
import 'prismjs/themes/prism.css';

import styles from './index.less';

const SuoLueTu = ({ fatherItem }) => {
  // setCurrentPresentation(id);
  const { slideList, currentSlideIndex, setCurrentPresentation, addSlide, deleteSlide } =
    useStore();

  console.log('slideList===开心的笑', slideList);

  // 判断什么语言;python、c、javascript
  const detectLanguage = (code) => {
    // Simple language detection based on common patterns
    const pythonPatterns = [/^#!/, /\bdef\b/, /\bprint\(/, /\bimport\b.*\n/, /:\s*$/m];

    const cPatterns = [
      /#include/,
      /int\s+main\s*\(/,
      /printf\s*\(/,
      /scanf\s*\(/,
      /void\s+\w+\s*\(/,
    ];

    const jsPatterns = [/const\s+/, /let\s+/, /function\s+/, /=>/, /console\.log/];

    let pythonScore = 0;
    let cScore = 0;
    let jsScore = 0;

    pythonPatterns.forEach((pattern) => {
      if (pattern.test(code)) pythonScore++;
    });

    cPatterns.forEach((pattern) => {
      if (pattern.test(code)) cScore++;
    });

    jsPatterns.forEach((pattern) => {
      if (pattern.test(code)) jsScore++;
    });

    if (pythonScore > cScore && pythonScore > jsScore) return 'Python';
    if (cScore > pythonScore && cScore > jsScore) return 'C';
    return 'JavaScript';
  };

  return (
    <div>
      {fatherItem?.slideList?.map((items, indexs) => {
        if (indexs === 0) {
          return (
            <>
              <div
                key={items.id}
                style={{
                  width: 224,
                  height: 114,
                  border: '1px solid #e8e8e8',
                  position: 'relative',
                }}
                className={`${styles['slide-item-wrap']}`}
              >
                <div
                  style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: 400,
                    height: 200,
                    background: 'red',
                    opacity: 0,
                    zIndex: 2,
                  }}
                />
                <div
                  className={styles['slide-content']}
                  style={{
                    transform: 'scale(0.35)',
                    marginTop: -176,
                    marginLeft: -352,
                  }}
                >
                  {items?.elements?.map((item) => {
                    // 文本
                    if (item.type === 'Text') {
                      return (
                        <div
                          className={styles['slide-item']}
                          key={item?.id}
                          style={{
                            border: '1px solid #e8e8e8',
                            color: item?.fontColor || '#000000',
                            fontSize: `${item?.fontSize || 18}em`,
                            fontWeight: item?.fontWight || 800,
                            width: item?.blockWidth || 300,
                            height: item?.blockHeight || 300,
                            overflow: 'hidden',
                          }}
                        >
                          {item?.content}
                        </div>
                      );
                    }
                    // 图片
                    if (item.type === 'Image') {
                      return (
                        <div className={styles['slide-item']} key={item.id}>
                          <img
                            style={{
                              width: item?.blockWidth || 300,
                              height: item?.blockHeight || 200,
                            }}
                            src={item?.imageUrl}
                            alt={item?.describe}
                            onError={(e) => {
                              const target = e.target;
                              target.src =
                                'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
                            }}
                          />
                        </div>
                      );
                    }
                    // 视频
                    if (item.type === 'Video') {
                      return (
                        <div className={styles['slide-item']} key={item.id}>
                          <video
                            style={{
                              border: '1px solid #e8e8e8',
                              verticalAlign: 'middle',
                              objectFit: 'fill',
                            }}
                            width={item?.blockWidth || 500}
                            height={item?.blockHeight || 250}
                            controls
                            // 阻止默认的双击全屏行为
                            controlsList="nofullscreen"
                          >
                            <source src={item?.videoUrl || 250} type="video/mp4" />
                            Your browser does not support the video tag.
                          </video>
                        </div>
                      );
                    }
                    // 代码
                    if (item.type === 'Code') {
                      return (
                        <div className={styles['slide-item']} key={item.id}>
                          <div className={styles['slide-item']} key={item.id}>
                            <div
                              className={styles['code-body']}
                              style={{
                                backgroundColor:
                                  detectLanguage(item?.content) === 'Python'
                                    ? '#eef6ff'
                                    : detectLanguage(item?.content) === 'JavaScript'
                                    ? '#fefce8'
                                    : '#fbf5ff',
                              }}
                            >
                              <div className={styles['code-title']}>
                                {detectLanguage(item?.content)}
                              </div>
                              <Editor
                                className={styles['code-content']}
                                value={item?.content}
                                highlight={(code) => highlight(code, languages.js, 'javascript')}
                                padding={4}
                                style={{
                                  fontFamily: '"Fira code", "Fira Mono", monospace',
                                  fontSize: item?.fontSize * 16 || 12,
                                }}
                                readOnly
                              />
                            </div>
                          </div>
                        </div>
                      );
                    }
                    return null;
                  })}
                </div>
              </div>
            </>
          );
        }
        return null;
      })}
    </div>
  );
};

export default SuoLueTu;
